<template>
  <div class="index">
    <div class="wrapArticle">
      <div class="art-left">
        <div class="title">
          <div class="userIIfo">
            <div class="userImg">
              <img :src="article.uhead" alt />
            </div>
            <div>{{article.UserName}}</div>
          </div>
          <h2>{{article.TTopic}}</h2>
          <div class="title-detail">
            发布于 {{article.TTime}}
            <span></span>
            来自 {{classes[article.TSID-1]}}
          </div>
        </div>
        <!-- 帖子内容 -->
        <div class="content">
          <div class="md" v-html="article.TContent"></div>
          <div class="replyBottom">
            <p><i class="iconfont">&#xe679;</i> {{article.TClickCoount}} 发布于 {{article.TTime}}</p>
            <div class="btnGroup">
              <div class="btn">
                <i class="iconfont">&#xe62b;</i>
                赞 6
              </div>
              <div class="btn">
                <i class="iconfont">&#xe717;</i>
                转 6
              </div>
            </div>
            <p class="p2">本作品系原创 ，采用《xxxxx》许可协议</p>
            <el-divider></el-divider>
            <div class="userInfoBottom">
              <div class="img">
                <img :src="article.uhead" alt />
              </div>
              <div class="info">
                <h3>{{article.UserName}}</h3>
                <div>
                  <i class="iconfont">&#xe63f;</i>
                  知否用户
                </div>
              </div>
              <div
                class="btn uBottomR"
                :class="{'isFollow':isFollow(article.TUID)}"
                @click="followUser(article.TUID)"
              >
                <span v-if="isFollow(article.TUID)">已</span>关注
              </div>
            </div>
          </div>
          <!-- 帖子的回复-->
        </div>
        <div class="replayContent">
          <div class="main-title">{{articleReply.length}} 条评论</div>
          <div class="addReply Rcontent">
            <div class="img">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
            <el-input v-model="replayContent" placeholder="请撰写评论"></el-input>
            <!-- <div class="Rmain">{{item.RContent}}</div> -->
          </div>
          <div class="replyBtn">
            <el-button type="primary" @click="submitReply()">提交评论</el-button>
          </div>
          <div class="Rcontent" v-for="(item,index) of articleReply" :key="index">
            <div class="img">
              <img :src="item.RUHead" alt />
            </div>
            <div class="Rtitle">
              <span class="username">{{item.UName}}</span>
              <span v-if="item.RRID" class="repName">
                <span class="repNameC">回复</span>
                {{item.RRName}}
              </span>
              <span style="font-size:15px;font-weight:600">:</span>
              <span class="rMain">{{item.RContent}}</span>
              <div class="titleRight">
                <i class="iconfont" @click="showReply(index)">&#xe717;</i>·
                <span class="Rtime">{{item.Rtime}}</span>
                <div class="replyUser" :class="{'showReplyUser':index==showReplyFlag}">
                  <el-input v-model="replayUserContent" placeholder="请撰写评论"></el-input>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="submitReply(item.RID,item.Runame)"
                  >回复TA</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fix-left" v-if="1" ref="leftFix">
          <div class="icon-wrap">
            <i class="iconfont">&#xe62e;</i>
          </div>
          <span>点赞</span>
          <div class="icon-wrap b">
            <i class="iconfont">&#xe609;</i>
          </div>
          <div class="icon-wrap b">
            <i class="iconfont">&#xe602;</i>
          </div>
        </div>
      </div>
      <div class="art-right">
        <div class="user-info">
          <div class="title">
            <div class="img">
              <img :src="article.uhead" alt />
            </div>
            <div class="info">
              <div>
                作者&ensp;{{article.UName}}
                <span>关注</span>
              </div>
            </div>
          </div>
          <div class="hr"></div>
          <ul class="user-article">
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
          </ul>
        </div>
        <div class="recommend-read" ref="recommendRead">
          <div class="title">推荐阅读</div>
          <ul>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
            <li>
              <h4>写的越多，月黔驴技穷</h4>
              <span>阅读 16580</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="art-bottom" ref="input">
        <div class="wrap">
          <textarea
            @focus="inputFocus"
            v-model="replayContent"
            ref="textarea"
            placeholder="说下你的看法..."
          />
          <span class="menu" v-if="!inputFlag">
            <span>
              <i class="iconfont">&#xe6ba;</i>
              评论 {{article.TReplyCount}}
            </span>
          </span>
          <strong v-if="!inputFlag" @click.stop="showMenu">···</strong>
          <ul class="replay-menu" v-if="!inputFlag" ref="replayMenu">
            <li class="oneLi">
              <span>分享文章</span>
              <i class="iconfont">&#xe604;</i>
              <ul class="subMenu">
                <li>分享到微博</li>
                <li>分享到微信</li>
              </ul>
            </li>
            <li>分享文章</li>
            <li>分享文章</li>
            <li>分享文章</li>
          </ul>
          <button class="btn-send" v-if="inputFlag" @click.stop="submitReply()">发布</button>
          <button class="btn-cancle" v-if="inputFlag" @click.stop="cancelReplay">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "components/header.vue";
import Footer from "components/footer.vue";
import { handleTime } from "../common/time";
import { getUserL } from "../common/mixin";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      inputFlag: false,
      showMenuFlag: false,
      isTop: true,
      scrollToptimer: null,
      article: {},
      replayContent: "",
      replayUserContent: "",
      articleReply: {},
      classes: ["分享", "精华", "问答", "测试"],
      ttime: "",
      showReplyFlag: -1
    };
  },
  // mixins: [getUserL],
  components: {
    Header,
    Footer
  },
  created() {
    this.getArticleInfo();
    this.getReply();
    this.$store.commit("setHeaderScroll", true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.onscroll);
    window.removeEventListener("scroll", this.menuClick);
  },
  mounted() {
    window.addEventListener("scroll", this.onscroll);
    window.addEventListener("click", this.menuClick);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {});
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit("setHeaderScroll", false);
    next();
  },
  methods: {
    /**
     * tid: 帖子数据
     * countclick 点击数增加
     */
    async getArticleInfo() {
      const res = await this.$http.get(
        `public/detail?tid=${this.$route.params.tid}&clickcount=${this.$route.params.clickcount}`
      );
      if (res.errno !== 0) {
        this.$message.warning("获取帖子数据失败,请重试！");
        return;
      }
      this.article = res.data;
      this.article.TTime = handleTime(this.article.TTime);
    },
    // 帖子回复数据
    async getReply() {
      const res = await this.$http.get(
        `public/getreply?tid=${this.$route.params.tid}`
      );
      if (res.errno !== 0) {
        this.$message.warning("获取回复数据失败,请重试！");
        return;
      }
      this.articleReply = res.data;
      this.articleReply.forEach(item => {
        item.Rtime = handleTime(item.Rtime);
      });
    },
    /** 提交回复*/
    submitReply(rid = null, rrname = null) {
      if (!this.replayContent && !this.replayUserContent) {
        this.$alert("说点什么吧！", "提醒", {
          confirmButtonText: "好的"
        });
      } else {
        if (!this.user.UID) {
          this.$message.warning("登录后才可以回复哦!");
          this.$router.push("/login");
          return;
        }
        if (this.replayUserContent) {
          this.replayContent = this.replayUserContent;
        }
        this.$http
          .post("blog/reply", {
            rtid: this.$route.params.tid,
            rsid: this.article.TSID,
            ruid: this.user.UID, // 用户id
            rcontent: this.replayContent,
            rCount: this.article.TReplyCount,
            uname: this.user.UName,
            uhead: this.user.UHead,
            rid,
            rrname
          })
          .then(res => {
            if (res.errno == 0 && res.code == 0) {
              this.$message.success("回复成功");
              this.getReply();
              this.replayContent = "";
              this.showReplyFlag = -1;
            } else {
              this.$message.warning("回复失败,请稍后再试！");
            }
          })
          .catch(res => {});
      }
    },
    inputFocus() {
      this.inputFlag = true;
      this.showMenuFlag = false;
      this.$refs.input.style.height = "80px";
      this.$refs.textarea.style.width = "500px";
      this.$refs.textarea.style.borderRadius = "3px";
    },
    cancelReplay() {
      this.inputFlag = false;
      this.$refs.input.style.height = "";
      this.$refs.textarea.style.width = "";
      this.$refs.textarea.style.borderRadius = "";
    },
    showMenu() {
      this.showMenuFlag = true;
      this.$refs.replayMenu.style.opacity = "1";
    },
    onscroll() {
      let height = document.documentElement.scrollTop;
      if (height > 80) {
        this.$refs.leftFix.style.position = "fixed";
        this.$refs.leftFix.style.top = "70px";
        this.$refs.leftFix.style.left = "6%";
      } else {
        this.$refs.leftFix.style.position = "absolute";
        this.$refs.leftFix.style.top = "";
        this.$refs.leftFix.style.left = "";
      }
      if (height > 280) {
        this.$refs.recommendRead.style.position = "fixed";
        this.$refs.recommendRead.style.top = "75px";
      } else {
        this.$refs.recommendRead.style.position = "";
      }
    },
    menuClick() {
      if (this.showMenuFlag) {
        this.$refs.replayMenu.style.opacity = "0";
      }
      this.showMenuFlag = false;
    },
    async followUser(uuid) {
      const res = await this.$http.post("blog/follow", {
        uid: this.user.UID,
        uuid: uuid
      });
      if (res.code == 1) {
        // 取消关注
        this.delUserFollow(uuid);
        this.$message({
          showClose: true,
          message: "已取消关注！",
          type: "success"
        });
      } else if (res.code == 2) {
        // 关注
        this.addUserFollow(uuid);
        this.$message({
          showClose: true,
          message: "恭喜你，关注成功",
          type: "success"
        });
      } else {
        // 数据异常
        this.$message.warning("数据异常");
      }
    },
    isFollow(uuid) {
      if (this.user.UID == 0) return;
      if (this.user.follow == undefined) {
        return false;
      }
      return this.user.follow.some(item => {
        return item == uuid;
      });
    },
    showReply(index) {
      if (this.showReplyFlag == index) {
        this.showReplyFlag = -1;
        return;
      }
      this.showReplyFlag = index;
    },
    ...mapActions(["delUserFollow", "addUserFollow"])
  },
  computed: {
    ...mapGetters({
      user: "getUser"
    })
  }
};
</script>

<style lang='scss'>
@media screen and (max-width: 1200px) {
  .index {
    .wrapArticle {
      width: 90% !important;
      .art-left {
        .fix-left {
          display: none !important;
        }
      }
      .art-right {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 986px) {
  .index {
    .wrapArticle {
      width: 80% !important;
      .art-bottom {
        display: none;
      }
    }
  }
}
@media screen and (max-width: 500px) {
  .index {
    .wrapArticle {
      width: 100% !important;
      padding: 5px;
      box-sizing: border-box;
      .art-left {
        margin-top: 8px !important;
      }
      .replyBtn {
        height: 46px;
      }
    }
  }
}

.index {
  margin-top: 60px;
  min-height: calc(100vh - 70px);
  font-size: 14px;
  border-radius: 5px;
  background-color: #e9ecef;
  .wrapArticle {
    position: relative;
    display: flex;
    width: 80%;
    margin: 0 auto;
    align-items: flex-start;
    .art-left {
      box-sizing: border-box;
      border-radius: 5px;
      margin-top: 20px;
      flex: 1;
      .title {
        display: flex;
        border-radius: 5px;
        flex-direction: column;
        border-bottom: 1px solid #eeeeee;
        padding: 20px;
        box-sizing: border-box;
        background: white;
        .userIIfo {
          display: flex;
          align-items: center;
          height: 30px;
          margin-bottom: 15px;
          .userImg {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 15px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        h2 {
          color: black;
          margin-bottom: 10px;
        }
        .title-detail {
          display: flex;
          align-items: center;
          font-size: 12px;
        }
        span {
          display: inline-block;
          height: 4px;
          width: 4px;
          background: #969696;
          border-radius: 50%;
          margin: 3px;
        }
      }
      .content {
        min-height: 50px;
        margin-bottom: 20px;
        background: white;
        padding: 20px;
        box-sizing: border-box;
        font-size: 16px;
        font-weight: bold;
        .md {
          min-height: 150px;
          img {
            width: 100%;
          }
        }
        .btn {
          width: 78px;
          margin: 6px;
          height: 38px;
          box-sizing: border-box;
          padding: 8px;
          text-align: center;
          border: 1px solid #00965e;
          border-radius: 3px;
          font-size: 15px;
          cursor: pointer;
          &:hover {
            background: #00965e;
            color: #ffffff;
          }
        }
        .replyBottom {
          margin-top: 120px;
          .btnGroup {
            display: flex;
            justify-content: center;
            margin-bottom: 5px;
          }
          .p2 {
            text-align: center;
            margin-bottom: 35px;
          }
          .userInfoBottom {
            display: flex;
            align-items: center;
            .img {
              width: 50px;
              height: 50px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .info {
              margin: 0 15px;
              font-size: 14px;
              font-weight: normal;
              h3 {
                font-size: 18px;
                color: black;
              }
              .iconfont {
                color: rgb(255, 193, 7);
              }
            }
            .uBottomR {
              margin-left: auto;
              height: 38px;
              width: 90px;
              background: #00965e;
              cursor: pointer;
              color: white;
            }
            .isFollow {
              background: #00633e;
              color: white;
            }
          }
        }
      }
      .replayContent {
        border-radius: 5px;
        background: white;
        margin-bottom: 15px;
        .main-title {
          background-color: #e9ecef;
          border: none;
          height: 30px;
          font-size: 16px;
          font-weight: bolder;
        }
        .addReply {
          padding-bottom: 0;
          .img {
            border-radius: 50%;
            margin-right: 15px;
          }
          .el-input {
            height: 10px;
            width: 100%;
          }
        }
        .replyBtn {
          margin-right: 15px;
          display: flex;
          justify-content: flex-end;
          padding-right: 20px;
          box-sizing: border-box;
          .el-button {
            height: 38px;
            width: 90px;
            border: none;
            background: #5abb97;
          }
        }
        .Rcontent {
          min-height: 30px;
          padding: 20px;
          box-sizing: border-box;
          display: flex;
          border-radius: 5px;
          .img {
            height: 30px;
            width: 30px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .Rtitle {
            width: 100%;
            margin-left: 15px;
            .username {
              font-size: 13px;
              font-weight: 700;
              color: #00965e;
              &:hover {
                color: black;
                cursor: pointer;
              }
            }
            .repName {
              font-size: 16px;
              color: #01965f;
              .repNameC {
                color: #9aa0a6;
              }
            }
            .rMain {
              font-size: 17px;
            }
            .Rtime {
              font-size: 11px;
              color: #08c;
            }
            .titleRight {
              margin-left: auto;
              margin-top: 5px;
              .iconfont {
                font-size: 12px;
                cursor: pointer;
                margin-right: 5px;
              }
              i:first-child {
                font-size: 15px;
              }
            }
            .replyUser {
              display: flex;
              display: none;
              flex-direction: column;
              justify-content: center;
              height: 80px;
              padding: 15px;
              box-sizing: border-box;
              background: #f8f9fa;
              border-radius: 3px;
              .el-input__inner {
                height: 30px;
                width: 100%;
                margin: 0 auto;
              }
              .el-button {
                align-self: flex-end;
                margin-top: 8px;
              }
            }
            .showReplyUser {
              display: flex;
            }
          }
          .Rmain {
            margin-top: 15px;
            min-height: 30px;
          }
          .el-textarea__inner {
            height: 130px;
            resize: none;
            margin-bottom: 15px;
          }
          .el-button {
            background-color: #08c;
            color: white;
          }
        }
      }
      .fix-left {
        position: absolute;
        text-align: center;
        left: -63px;
        top: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon-wrap {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          display: flex;
          background: white;
          color: #00965e;
          margin: 5px 0;
          &:hover {
            background: #00965e;
            cursor: pointer;
            color: white;
          }
          .iconfont {
            margin: auto;
            font-size: 26px;
            cursor: pointer;
          }
        }
        .b {
          width: 30px;
          height: 30px;
          background: white;
          color: #8d949a;
          &:hover {
            background: #6c757d;
          }
        }
      }
    }
    .art-right {
      width: 290px;
      margin-top: 20px;
      margin-left: 15px;
      .user-info {
        background: white;
        margin-bottom: 15px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 14px;
        .title {
          display: flex;
          margin-bottom: 15px;
          .img {
            height: 30px;
            width: 30px;
            background: brown;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          span {
            display: inline-block;
            font-size: 12px;
            width: 35px;
            height: 15px;
            text-align: center;
            line-height: 15px;
            border-radius: 5px;
            border: 1px solid yellowgreen;
            margin-bottom: 5px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .hr {
          height: 1px;
          width: 100%;
          background: #eeeeee;
        }
        .user-article {
          margin: 15px auto;
          li {
            margin-top: 15px;
          }
        }
      }
      .recommend-read {
        box-sizing: border-box;
        padding: 10px;
        background: white;
        border-radius: 5px;
        width: 290px;
        .title {
          border-left: 2px solid red;
          padding-left: 5px;
        }
        ul {
          margin: 15px auto;

          li {
            margin-top: 15px;
          }
        }
      }
    }
    .art-bottom {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 55px;
      box-sizing: border-box;
      padding: 10px 10px 10px 150px;
      background: white;
      transition: all 0.3s;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
      .wrap {
        height: 100%;
        display: flex;
        align-items: center;
        textarea {
          width: 350px;
          height: 100%;
          outline: none;
          background: #f2f2f2;
          color: #969696;
          font-size: 16px;
          border-radius: 15px;
          resize: none;
          padding: 10px;
          border: none;
          overflow: hidden;
          box-sizing: border-box;
          transition: all 0.2s cubic-bezier(0.19, 0.4, 0.17, 0.85);
        }
        .menu {
          font-size: 16px;
          color: #969696;
          span {
            margin: 0 8px;
          }
          .iconfont {
            font-size: 26px;
            color: #969696;
          }
        }
        button {
          align-self: flex-end;
          height: 30px;
          width: 50px;
          outline: none;
          border-radius: 999px;
          border: none;
          margin: 0 5px;
          font-size: 14px;
          cursor: pointer;
        }
        .btn-send {
          background: #f3a393;
          color: white;
        }
        .btn-cancle {
          border: 1px solid #f3a393;
          color: #f3a393;
        }
        strong {
          margin-left: 15px;
          font-size: 18px;
          font-weight: bolder;
          color: #969696;
          cursor: pointer;
        }
        .replay-menu {
          opacity: 0;
          border-radius: 3px;
          display: flex;
          flex-direction: column;
          min-width: 88px;
          height: 160px;
          background: white;
          margin-top: -190px;
          margin-left: -44px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          li {
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            &:hover {
              background: #f2f2f2;
            }
          }
          .oneLi {
            position: relative;
            .iconfont {
              position: absolute;
              margin-top: 2px;
            }
            &:hover {
              background: #f2f2f2;
              .subMenu {
                opacity: 1;
                min-width: 88px;
              }
            }
            .subMenu {
              transition: all 0.5s;
              border-radius: 3px;
              position: absolute;
              opacity: 0;
              display: flex;
              flex-direction: column;
              left: 93px;
              top: 0px;
              min-width: 80px;
              background: white;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }
    }
    .backTop {
      position: fixed;
      bottom: 10%;
      right: 5%;
      height: 35px;
      width: 35px;
      border-radius: 50%;
      background: white;
      box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
      opacity: 0;
      transition: all 0.3s;
      &::before {
        position: absolute;
        margin-left: 9px;
        margin-top: 3px;
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: 9px solid red;
        border-color: transparent;
        border-bottom-color: #969696;
        cursor: pointer;
      }
    }
  }
}
</style>